<template>
	<view class="add-team">
		<view class="tip">为保证比赛正常进行，请正确添加队伍信息！</view>

		<u-form labelPosition="left" :model="formData" labelWidth="240rpx" ref="form">
			<u-form-item label="队伍logo" prop="logo" borderBottom>
				<view class="flex-between">
					<view></view>
					<view class="flex-align">
						<image @click="avatarimage" v-if="url_phoneimg != ''"
							src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d486f37c1f8b7458c01bc2243e0333f252f2b33a.png"
							mode=""
							style="width: 30rpx; height: 30rpx;position: absolute;right: 16rpx;z-index: 999;top: 108rpx;">
						</image>
						<image style="width: 84rpx; height: 84rpx;" v-if="url_phoneimg != ''" :src="url_phoneimg">
						</image>
						<u-upload v-else :fileList="fileList1" name="1" width="80rpx" height="80rpx"
							@afterRead="afterRead" @delete="deletePic" multiple :maxCount="1" />

						<!-- <u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 20rpx;">
						</u-icon> -->
					</view>
				</view>
			</u-form-item>
			<u-form-item label="队伍名" prop="name" borderBottom>
				<u-input v-model="formData.name" placeholder="请输入队伍名" border="none" />
			</u-form-item>

			<u-form-item label="类型" prop="type" borderBottom>
				<u-input v-model="formData.type" placeholder="例如:篮球" border="none" />
			</u-form-item>
			<u-form-item label="城市" prop="city" borderBottom>
				<view @click="showCityPicker = true" class="flex-between">
					<u-text :text="formData.city" v-if="formData.city" color="#303133"></u-text>
					<u-text text="请选择城市" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx"></u-icon>
				</view>
				<u-picker :show="showCityPicker" :columns="columns" @confirm="confirmCity" ref="uPicker"
					@cancel="showCityPicker = false" @change="changeHandler" />



			</u-form-item>
			<u-form-item label="简介" prop="description">
				<u-input v-model="formData.description" placeholder="介绍下您的队伍" border="none" />
			</u-form-item>
			<!-- <u-form-item label="所属俱乐部" prop="club_id">
				<u-input v-model="formData.club_id" placeholder="请输入所属俱乐部" border="none" />
			</u-form-item> -->


			<!-- <u-form-item label="所属俱乐部" prop="kinship">
				<view @click="showKinshipPicker = true" class="flex-between">
					<u-text :text="formData.kinship" v-if="formData.kinship" color="#303133"></u-text>
					<u-text text="请选择所属俱乐部" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;">
					</u-icon>
				</view>
				<u-picker :show="showKinshipPicker" :columns="columnn.kinship"
					@confirm="confirmPicker($event, 'kinship')" @cancel="showKinshipPicker = false" />
			</u-form-item>
 -->



			<view class="group">
				<u-form-item label="队长" prop="leader" borderBottom>
					<u-input v-model="formData.leader" placeholder="请输入队长姓名" border="none" />
				</u-form-item>
				<u-form-item label="联系方式" prop="phone">
					<u-input v-model="formData.phone" type="number" placeholder="请输入联系方式" border="none" />
				</u-form-item>
			</view>
		</u-form>

		<view class="bottom-add-btn">
			<u-button text="保存" shape="circle" @click="add"
				color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		formatDate,
		serialize
	} from '@/utils/util.js';
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				formData: {
					name: '', //队伍名
					type: '', //类型
					city: '', //城市
					description: '', //简介
					leader: '', //队长
					phone: '', //联系方式
					club_id: '', //所属俱乐部
					kinship: '', //亲属关系
				},
				showCityPicker: false,
				columns: [],
				columnData: [],
				fileList1: [],
				url_phone: '',
				url_phoneimg: '',
				showKinshipPicker: false,
				columnn: {
					kinship: [
						// ['母亲','12','23'],

					],

				},
				itemlist: [],
				club_id: '',
				id: ''

			}
		},
		onLoad(option) {
			console.log(option, '14312')
			if (option.type != 1) {
				const item = JSON.parse(decodeURIComponent(option.item));
				this.formData.name = item.team_name
				this.formData.phone = item.phone
				this.formData.type = item.team_type
				this.formData.description = item.team_info
				this.formData.leader = item.leader
				this.club_id = item.club_id
				this.id = item.id
				this.url_phoneimg = item.team_logo
				this.formData.city = item.city
			}
			this.getCityList();
			// this.getClubList()
		},
		methods: {
			avatarimage() {
				this.url_phoneimg = ''
			},
			confirmPicker({
				value
			}, key) {
				this.formData[key] = value.join('');
				this.formData.kinship = this.formData[key]

				this.itemlist.forEach(item => {
					// itemArr.push(item.club_name)
					if (this.formData.kinship == item.club_name) {
						this.formData.kin_s = item.id
					}
				})
				this[`show${key[0].toUpperCase() + key.slice(1)}Picker`] = false;
			},
			async getClubList() {
				let params = {
					open_id: uni.getStorageSync("openid"),
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await venues.getClubList(params);
				if (res.code == 1) {
					this.itemlist = res.data.result.itemArr
					let kinship = []
					let itemArr = []
					this.itemlist.forEach(item => {
						itemArr.push(item.club_name)
						if (this.club_id == item.id) {
							let clublist = []
							clublist.push(item.club_name)
							this.formData.kinship = clublist
						}
					})


					kinship.push(itemArr)
					this.columnn.kinship = kinship
				}
			},
			// 获取培训班详情
			async getCityList() {
				let params = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				}
				let res = await venues.getCityList(params);
				console.log(res, '444')
				if (res.code == 1) {
					this.columnData = res.data.result.columnData
					this.columns = res.data.result.columns3
				}
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url, 'opop')
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test',
							project_id: getApp().globalData.projectId,
							app_id: this.$https.weixinAppId,

						},
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_phone = result.data.url
							setTimeout(() => {
								resolve(this.url_phone)
							}, 1000)
						}
					});
				})
			},
			async add() {
				if (this.url_phoneimg != '') {
					this.url_phone = this.url_phoneimg
				}
				this.itemlist.forEach(item => {
					// itemArr.push(item.club_name)
					if (this.formData.kinship == item.club_name) {
						this.formData.kin_s = item.id
					}
				})
				let that = this
				if (!that.formData.phone) { //判断如果手机号为空，提示用户输入手机号
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				} 
				if (this.formData.type == '') {
					uni.showToast({
						title: '请输入类型',
						icon: 'none'
					})
				} else if (this.formData.name == '') {
					uni.showToast({
						title: '请上传队伍名',
						icon: 'none'
					})
				} else if (this.url_phone == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
				} else if (this.formData.city == '') {
					uni.showToast({
						title: '请输入城市',
						icon: 'none'
					})

				} else if (this.formData.leader == '') {
					uni.showToast({
						title: '请输入队长',
						icon: 'none'
					})

				} else if (this.formData.description == '') {
					uni.showToast({
						title: '请输入简介',
						icon: 'none'
					})

				} else {
					uni.showLoading({
						title: "加载中",
					});
					let params = {
						team_name: this.formData.name, //名字
						team_logo: this.url_phone, //头像logo
						club_id: this.formData.kin_s, //所属俱乐部
						dqid: this.formData.city, //城市
						team_info: this.formData.description, //简介
						leader: this.formData.leader, //队长
						phone: this.formData.phone, //电话
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						team_type: this.formData.type,
						open_id: uni.getStorageSync("openid"),
						id: this.id
					};
					let res = await venues.addteam(params);
					console.log(res, '22222')
					if (res.code === 1) {
						uni.hideLoading();
						uni.navigateBack();

					}
					// try {
					// 	const valid = await this.$refs.form.validate();
					// 	if (valid) {

					// 		if (this.options.return) {
					// 			uni.navigateTo({
					// 				url: this.options.return + '?' + serialize(this.formData)
					// 			});
					// 		} else {
					// 			uni.navigateBack();
					// 		}
					// 	}
					// } catch (e) {

					// }
				}
				// try {
				// 	const valid = await this.$refs.form.validate();
				// 	if (valid) {
				// 	}
				// } catch (e) {

				// }
			},
			// 城市
			confirmCity({
				value
			}) {
				this.formData.city = value.join('/');
				this.showCityPicker = false;
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.add-team {
		min-height: 100vh;
		background-color: #f7f7f7;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

		.tip {
			padding: 30rpx;
			font-size: 24rpx;
			color: #666666;
		}

		/deep/.u-form {
			.u-form-item {
				background-color: #fff;
			}

			.u-form-item__body {
				padding: 30rpx;
			}

			.group {
				margin-top: 30rpx;
			}

			.u-form-item__body__right__message {
				margin-left: 270rpx !important;
			}

			.u-upload__button {
				margin: 0;
			}
		}
	}
</style>
